@import shared.VarTool
@import tool.soft.CcaRdaSoft
@(missionId: Int)(implicit request: RequestHeader,messages: Messages)
@main(s"${messages("projectDetails")}-" + messages(CcaRdaSoft.nameStr))("allMission", "") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("jquery-minicolors/jquery.minicolors.css")">

	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/filter-control/my-bootstrap-table-filter-control.js")" type="text/javascript"></script>

	<script src="@routes.Assets.at("jquery-minicolors/jquery.minicolors.js")" type="text/javascript"></script>


	<style>
			.genome-pre {
				white-space: pre-wrap;
				word-wrap: break-word;
				border: 0px solid #ccc;
				background-color: white;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url();
				padding: .5em;
				padding-right: 1.5em
			}

			.fr {
				float: right;
			}

			.base-info .item .title span {
				display: inline-block;
				border-left: 2px solid #0b8af4;
				font-size: 14px;
				color: #333;
				padding-left: 10px;
			}

			.photo span {
				display: block;
				width: 92px;
				height: 92px;
			}

			.photo img {
				width: 100%;
				height: 100%;
			}

			tr > td {
				padding-top: 10px !important;
				padding-bottom: 10px !important;
			}

			.fglefttitle {
				font-size: 30px;
				font-weight: lighter;
				color: #A2A2A2;
			}

			#row-main {
				overflow-x: hidden;
			}

			#content {
				transition: width 0.3s ease;
			}

			#sidebar {
				transition: margin 0.3s ease;
			}

			.collapsed {
				display: none;
			}

			.myAddon {
				background-color: white;
				border: 0px;
			}

			.myFc {
				border-radius: 4px !important;
			}

			.has-error .input-group-addon {
				color: #a94442;
				background-color: white;
				border-color: #a94442;
			}

	</style>
	<div class="page-content">

		<div class="row">

			<div class="col-md-12">
				<div id="form_wizard_1" class="portlet light profile-sidebar-portlet bordered">

					<div class="portlet-title">
						<div class="item">
							<div class="title clear">
								<a href="@routes.MissionController.missionManageBefore">@messages("myTasks")</a> /
								<a href="@routes.SoftController.ccaRdaBefore">@messages(CcaRdaSoft.nameStr)</a> /
								<span>@messages("projectDetails")</span>
							</div>
						</div>
						<div class="caption">
						</div>
					</div>

					<div class="portlet-body form">

						<div class="row">

							<div class="col-sm-6">

								<h4>@messages("projectInformation")</h4>

								<form class="form-horizontal" role="form" id="mission">
									<div class="form-body">

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("taskName"):</label>
													<div class="col-md-4">
														<p class="form-control-static" id="missionName">  </p>
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("moduleUtilized"):</label>
													<div class="col-md-4">
														<p class="form-control-static" id="kind">  </p>
													</div>
													<label class="control-label col-md-2">@messages("taskState"):</label>
													<div class="col-md-4">
														<p class="form-control-static" id="state">  </p>
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("startTime"):</label>
													<div class="col-md-4">
														<p class="form-control-static" id="startTime">  </p>
													</div>
													<label class="control-label col-md-2">@messages("endTime"):</label>
													<div class="col-md-4">
														<p class="form-control-static" id="endTime">  </p>
													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("inputFile"):</label>
													<div class="col-md-10">
														<p class="form-control-static" id="input">  </p>

													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("parameterTable"):</label>
													<div class="col-md-6" >
														<table class="display table table-bordered" id="argTable" data-pagination="true"
														data-page-list="[10, 25, 50, 100, all]" >
															<thead>
															</thead>
														</table>
														<p class="form-control-static" id="arg">  </p>

													</div>
												</div>
											</div>
										</div>

										<div class="row">
											<div class="col-md-12">
												<div class="form-group">
													<label class="control-label col-md-2">@messages("zippedResults"):</label>
													<div class="col-md-4">
														<p class="form-control-static" >
															<a href="@routes.MissionController.downloadResult?missionId=@missionId">
																<i class="fa fa-download"></i>
															</a>
														</p>
													</div>
												</div>
											</div>
										</div>

									</div>
								</form>

							</div>

							<div class="col-sm-6">

								<h4>@messages("projectResults")</h4>

								<div class="table-responsive">

									<table class="display table table-bordered" id="table" data-pagination="true"
									data-page-list="[10, 25, 50, 100, all]" >
										<thead>

											<tr class="myTr">

											</tr>

										</thead>
									</table>

								</div>

							</div>

						</div>

						<hr>

						<div class="row" id="row-main">

							<div class="tab-pane  " id="ccaRda">

								<div class="col-sm-8" id="content">
									<div>

										<a class=" myToggle" style="float: right;
											border: 0px;
											margin-top: 10px">
											<i class="fa fa-angle-double-right" style="color: grey"></i>
										</a>
									</div>

									<img src="" id="ccaRdaImage" style="width: 100%">

								</div>

								<div class="col-sm-4" id="sidebar">

									<form id="form" class=" form-horizontal" accept-charset="UTF-8"
									method="post" style="margin-top: 30px;">

										<input type="hidden" name="missionId" value="@missionId">

										<ul class="nav nav-tabs myMainUl" id="plotArg">

											<li class="active" id="layoutLi">
												<a href="#ccaRdaLayout" data-toggle="tab" > @messages("layout") </a>
											</li>

											<li class="" id="colorLi">
												<a href="#ccaRdaColor" data-toggle="tab" > @messages("colors") </a>
											</li>

											<li class="" id="fontLi">
												<a href="#ccaRdaFont" data-toggle="tab" > @messages("fontArg") </a>
											</li>

										</ul >

										<div id="plotArgTabContent" class="tab-content" style="margin-top: 20px">

											<div class="tab-pane fade in active" id="ccaRdaLayout">

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("xAxis"):</label>
													<div class="col-sm-4">
														<select class="form-control fillByName" name="x" >
														</select>
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("yAxis"):</label>
													<div class="col-sm-4">
														<select class="form-control fillByName" name="y" >
														</select>
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@{messages("originCoordinate")}(x,y):</label>
													<div class="col-sm-8">
														<div class="input-group">
															<input class="form-control fillByName" name="ox" />
															<span class="input-group-addon">,</span>
															<input class="form-control fillByName" name="oy" />

														</div>
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("sampleSpotSize"):</label>
													<div class="col-sm-4">
														<input class="form-control fillByName" name="pointSize" />
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("showSampleNames"):</label>
													<div class="col-sm-4">
														<select class="form-control fillByNameAndTrigger myShowSample" name="showSample" >
															<option value="T" selected>@messages("yes")</option>
															<option value="F" >@messages("no")</option>
														</select>
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("showEnvironmentalFactors"):</label>
													<div class="col-sm-4">
														<select class="form-control fillByNameAndTrigger myShowEnv" name="showEnv" >
															<option value="T" selected>@messages("yes")</option>
															<option value="F" >@messages("no")</option>
														</select>
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("showSpecies"):</label>
													<div class="col-sm-4">
														<select class="form-control myShowSpecies fillByNameAndTrigger" name="showSpecies" >
															<option value="T" selected>@messages("yes")</option>
															<option value="F" >@messages("no")</option>
														</select>
													</div>
												</div>

												<div class="form-group species" >
													<label class="control-label col-sm-4">@messages("speciesSpotSize"):</label>
													<div class="col-sm-8">
														<input class="form-control fillByName" name="speciesPointSize" />
													</div>
												</div>

												<div class="form-group">
													<label class="control-label col-sm-4">@messages("picSizeWidthHeight"):</label>
													<div class="col-sm-8">
														<div class="input-group">
															<input class="form-control fillByName" name="width" />
															<span class="input-group-addon">-</span>
															<input class="form-control fillByName" name="height" />
														</div>
													</div>
												</div>

											</div>

											<div class="tab-pane " id="ccaRdaColor">

												<h5>@messages("groupColor")</h5>
												<div id="colors"></div>

												<h5>@messages("otherColor")</h5>

												<div class="form-group env">
													<label class="control-label col-sm-4">
														@messages("environmentalFactorsName"):</label>
													<div class="col-sm-8">
														<input type="text" name="envNameColor" class="form-control myMinicolors fillByName"/>
													</div>
												</div>

												<div class="form-group env">
													<label class="control-label col-sm-4">@messages("environmentalFactorsCoordinate"):</label>
													<div class="col-sm-8">
														<input type="text" name="envLineColor" class="form-control myMinicolors  fillByName"/>
													</div>
												</div>

												<div class="form-group species">
													<label class="control-label col-sm-4">
														@messages("mySpecies"):</label>
													<div class="col-sm-8">
														<input type="text" name="speciesColor" class="form-control myMinicolors  fillByName"/>
													</div>
												</div>

											</div>

											<div class="tab-pane  " id="ccaRdaFont">

												<div id="fontFamily">

												</div>

												<div id="myFontArg">

												</div>

											</div>


										</div>

										<div class="form-group form-horizontal">
											<div class="actions col-sm-offset-2 col-sm-4">
												<button type="button" class="btn btn-primary myRun" style="width: 90%;" id="search">
													@messages("run")</button>
											</div>
										</div>


									</form>


								</div>

							</div>

						</div>


					</div>

				</div>
			</div>
		</div>

		<div id="viewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 1000px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<h4 class="modal-title">
							<i class="fa fa-eye"></i>
							<span id="lblAddTitle" style="font-weight: bold">@{messages("fileView")}(<span id="fileName"></span>)</span>
						</h4>
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >
							<i class="fa fa-remove"></i>
						</button>
					</div>

					<div class="portlet-body form" style="margin-left: 15px;
						margin-right: 15px;
						margin-bottom: 15px">

						<div class="table-responsive">

							<table class="display table table-bordered" id="table" data-click-to-select="true"
							data-page-list="[10, 25, 50, 100, all]" >
								<thead>

									<tr class="myTr">

									</tr>

								</thead>
							</table>

						</div>

					</div>

				</div>
			</div>
		</div>


	</div>

	<script>

			var missionId = "@missionId"

			Header.selectHeader("mission")


			$(function () {
				Tool.fileInput
				CcaRdaResult.init

			})
	</script>


}
